<template>
	<el-cascader :size="size" filterable v-model="item.targetValue" :props="{ value: 'id', label: 'fullname', checkStrictly: true }" :options="options" @change="onChange" :clearable='clearable'>
	</el-cascader>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { deepRegion } from '@/afterSales/utils/common';
// import { AppModule } from '@/store/modules/app';
@Component({
  components: {}
})
export default class extends Vue {
  [x: string]: any;
  @Prop({ default: () => ({}) }) public item!: any;
  @Prop({ default: () => ({}) }) public field!: any;
  @Prop({ default: '' }) public size!: string;
  @Prop({ default: false }) public clearable!: string;
  private areaOptions: any = [] // 地区数据
  private $store: any;

  public get options () {
    return deepRegion(this.areaOptions, 1, this.field.regionType);
  }

  public onChange () {
    this.$emit('on-change');
  }

  public mounted () {
    this.$getCache('/base/action/general/cache/query', ['region'], false).then(res => {
      if (Object.keys(this.$store.state.common.publicCache.region).length) {
        this.areaOptions = Object.freeze(this.$store.state.common.publicCache.region?.result)
      }
    })
  }
}
</script>

<style lang="stylus"></style>
